import { formatTimeMinutes } from "./utils/transcript-utils";

interface SummaryChaptersProps {
	isSummaryDisabled: boolean;
	areChaptersDisabled: boolean;
	handleSeek: (time: number) => void;
	aiData: {
		title: string | null;
		summary: string | null;
		chapters:
			| {
					title: string;
					start: number;
			  }[]
			| null;
		processing: boolean;
	};
	aiLoading: boolean;
}

const SummaryChapters = ({
	isSummaryDisabled,
	areChaptersDisabled,
	handleSeek,
	aiData,
	aiLoading,
}: SummaryChaptersProps) => {
	const hasSummary = !isSummaryDisabled && !!aiData?.summary;
	const hasChapters =
		!areChaptersDisabled &&
		Array.isArray(aiData?.chapters) &&
		aiData.chapters.length > 0;

	if (aiLoading || (!hasSummary && !hasChapters)) return null;

	return (
		<div className="p-4 bg-white rounded-2xl border border-gray-3">
			{hasSummary && (
				<>
					<h3 className="text-lg font-medium">Summary</h3>
					<div className="mb-2">
						<span className="text-xs font-semibold text-gray-8">
							Generated by Cap AI
						</span>
					</div>
					<p className="text-sm whitespace-pre-wrap">{aiData.summary}</p>
				</>
			)}

			{hasChapters && (
				<div className={hasSummary ? "mt-6" : ""}>
					<h3 className="mb-2 text-lg font-medium">Chapters</h3>
					<div className="divide-y">
						{aiData.chapters?.map((chapter) => (
							<div
								key={chapter.start}
								className="flex items-center p-2 rounded transition-colors cursor-pointer hover:bg-gray-100"
								onClick={() => handleSeek(chapter.start)}
							>
								<span className="w-16 text-xs text-gray-500">
									{formatTimeMinutes(chapter.start)}
								</span>
								<span className="ml-2 text-sm">{chapter.title}</span>
							</div>
						))}
					</div>
				</div>
			)}
		</div>
	);
};

export default SummaryChapters;
